// src/components/device-management/Detail.tsx
import React, { useState } from "react";
import { Tabs, Button, Card } from "antd";
import DataListTab from "./DataLists/DataListTab";
import AlarmListTab from "./AlarmListTab/AlarmListTab";
import ProtocolConfigTab from "./ProtocolConfigTab/ProtocolConfigTab";
import { Template } from "./templateFields";

const { TabPane } = Tabs;
export type DetailProps = {
  initData?: Template; // 根据实际类型替换 any
};
const Detail: React.FC<DetailProps> = ({ initData }) => {
  const [activeTab, setActiveTab] = useState<string>("data-list");
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [triggerVisible, setTriggerVisible] = useState(false);

  return (
    <Card
      bordered={false}
      style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.09)", borderRadius: 8 }}
      bodyStyle={{ padding: 0 }}
    >
      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        tabBarStyle={{ padding: "0 16px" }}
      >
        <TabPane tab="数据列表" key="data-list">
          <DataListTab initData={initData} />
        </TabPane>
        <TabPane tab="报警列表" key="alarm-list">
          <AlarmListTab initData={initData} />
        </TabPane>
        <TabPane tab="协议配置" key="protocol-config">
          <ProtocolConfigTab initData={initData} />
        </TabPane>
      </Tabs>
    </Card>
  );
};

export default Detail;
